<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" style="margin: -10px;">
        <QuestionTitle @check-question="checkQuestion"></QuestionTitle>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          style="margin-top: 0"
          show-icon>
        </el-alert>
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#fafafa'}"
          style="width: 100%; margin-top: 15px;"
          class="tableColor">
          <el-table-column
            prop="number"
            label="试题编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型">
            <template #default="{ row }">
              {{ hireQuestionType[row.questionType] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干">
            <template #default="{ row }">
              {{ changeQuestion(row.question) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            width="250">
            <template #default="{ row }">
              {{ getQuestionDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="150">
            <template #default="{ row }">
              {{ hireDifficulty[row.difficulty] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template #default="{ row }">
              <el-button icon="el-icon-view" type="primary" circle plain @click="showDialog(row.id)"></el-button>
              <el-button icon="el-icon-edit" type="success" circle plain @click="editQuestion(row.id)"></el-button>
              <el-button icon="el-icon-delete" type="danger" circle plain @click="deleteDate(row.id)"></el-button>
              <el-button icon="el-icon-check" type="warning" circle plain @click="addChoice(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          layout="->,prev, pager, next, sizes, jumper"
          style="margin-top: 10px;"
          background
          :total="total">
        </el-pagination>
      </el-card>
    </div>
    <QuestionsPreview :dialog-visible="visible" :detail="dialogList" @close="closeDialog"></QuestionsPreview>
  </div>
</template>

<script>
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
import QuestionTitle from '@/module-hmmm/components/questions-title.vue'
import dayjs from 'dayjs'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
export default {
  name: 'Questions',
  components: {
    QuestionTitle,
    QuestionsPreview
  },
  data () {
    return {
      arrCatalog: [],
      tableData: [],
      visible: false,
      page: 1,
      params: {
        page: 1, // 当前页
        pagesize: 5 // 每页条数
      },
      total: 0, // 总数
      dialogList: {},
      hireQuestionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      hireDifficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      questionForm: {}
    }
  },
  async created () {
    this.fetchQuestionList()
  },
  methods: {
    // 渲染列表
    async fetchQuestionList () {
      const res = await list({
        ...this.params,
        ...this.questionForm
      })
      // console.log('limiande question',this.questionForm)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 枚举1，2，3转化单选、多选、简答
    // getQuestionType(question) {
    //   console.log('labellabel', question)
    //   return questionType.filter(item => item.value == question)[0].label
    // },
    // 枚举1，2，3转化简单、一般、困难
    // getQuestionDifficulty(difficult) {
    //   return difficulty.filter(item => item.value == difficult)[0].label
    // },
    // 去掉标签，使用内容
    changeQuestion (str) {
      return str.replace(/<[^>]+>/g, '')
    },
    // 时间格式化
    getQuestionDate (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 删除基础列表
    deleteDate (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        if (this.params.page > 1 && this.tableData.length === 1) {
          this.params.page--
        }
        this.fetchQuestionList()
      })
    },
    // 添加到精选列表
    addChoice (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({
          id: id,
          choiceState: 1
        })
        this.$message.success('添加精选成功')
        // this.fetchQuestionList()
        this.$router.push('/questions/choice')
      })
    },
    // 更新基础列表
    async editQuestion (id) {
      this.$router.push({
        path: '/questions/new',
        query: { id }
      })
    },
    // 预览
    async showDialog (id) {
      this.visible = true
      const res = await detail({ id })
      // console.log(res)
      this.dialogList = res.data
    },
    // 自定义事件触发弹窗开关
    closeDialog () {
      this.visible = false
    },
    // 分页当前页面改变触发
    handleCurrentChange (page) {
      this.params.page = page
      this.fetchQuestionList()
    },
    // 分页每夜页面数量改变触发
    handleSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.fetchQuestionList()
    },
    // 搜索按钮调接口
    async checkQuestion (questionForm) {
      this.params.page = 1
      this.questionForm = questionForm
      // console.log('getQuestion', this.questionForm)
      this.fetchQuestionList()
    }
  }
}
</script>

<style scoped lang="scss">
.tableColor {
  font-size: 14px;
  color: #606266;
}
</style>
